<template>
 <!-- <view class="flex-col page">
	  
	<view style="background-color: white; width: 100%;height: var(--status-bar-height);">
	</view>
	<uni-nav-bar :title="laboroom" color="#000" left-icon="left" @clickLeft="navBack()"/>
	  
    <view class="flex-col flex-auto group">
	  <view v-if="equips.length!=0" class="grid">
			<uni-grid :column="2" :highlight="true" @change="link" :square="false" :showBorder="false">
				<uni-grid-item v-for="(item, index) in equips" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;" @longtap="showDeleteDialog(index)">
						<view class="flex-col group_7 space-y-15">
							<view class="flex-col self-start section_3 space-y-14">
							  <view class="flex-col items-start">
								<image class="image_13" src="../../static/images/51276e00a4890f11936fcc00b81e6367.png" />
								<text class="font_1">{{item.name_equip}}</text>
							  </view>
							  
							  <view class="flex-row items-center space-x-4">
								<text class="font_4">{{item.name_room}}</text>
								<view class="section_2"></view>
								<text class="font_4 text_12" v-bind:style="{
									color:
									    item.workingtag_equip == '未连接'
										? '#a6a6a6'
										: item.workingtag_equip == '已连接'
										? '#03ac79'
										: item.workingtag_equip == '运行中'
										? '#03ac79'
										: item.workingtag_equip == '在线'
										? '#03ac79'
										: item.workingtag_equip == '设备离线'
										? '#a6a6a6'
										: item.workingtag_equip == '任务结束'
										? '#ff0000'
										: item.workingtag_equip == '运行暂停'
										? '#ff0000'
										: '',
								  }" >{{item.workingtag_equip}}</text>
							  </view>
							</view>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
	  </view>
	</view>
  </view> -->
  
  <view class="flex-col page">
    <view class="flex-col flex-auto group">
  	  <view v-if="equips.length!=0" class="grid"  @click="onclick()">
  		  <uni-nav-bar color="#000" left-icon="left" @clickLeft="navBack()" :title="laboroom" :right-icon="editMode ? 'checkmarkempty':'compose'" @clickRight="toggleEditMode"/>
  			<uni-grid :column="2" :highlight="true" @change="link" :square="false" :showBorder="false">
  				<uni-grid-item v-for="(item, index) in equips" :index="index" :key="index" >
  					<!-- 在这个地方下面添加点击设备方法 -->
  					<view class="grid-item-box" style="background-color: #fff;" @click="toggleIcon(index)">
  						<image class="flex-col image1" v-if="selectedIndex1 === index && editMode" :class="{ 'selected-icon': selectedIndex1 === index }" src="../../static/images/select.png" />
  						<image class="flex-col image1 selected-image" v-else-if="editMode" src="../../static/images/selected.png" />
  						<view class="flex-col group_7 space-y-15">
  							<view class="flex-col self-start section_3 space-y-14">
  							  <view class="flex-col items-start">
  								<image class="image_13" src="../../static/images/51276e00a4890f11936fcc00b81e6367.png" />
  								<text class="font_1">{{item.name_equip}}</text>
  							  </view>							  
  							  <view class="flex-row items-center space-x-4">
  								<text class="font_4">{{item.name_room}}</text>
  								<view class="section_2"></view>
  								<text class="font_4 text_12" v-bind:style="{
  									color:
  									    item.workingtag_equip == '未连接'
  										? '#a6a6a6'
  										: item.workingtag_equip == '已连接'
  										? '#03ac79'
  										: item.workingtag_equip == '运行中'
  										? '#03ac79'
  										: item.workingtag_equip == '在线'
  										? '#03ac79'
  										: item.workingtag_equip == '设备离线'
  										? '#ff0000'
  										: item.workingtag_equip == '任务结束'
  										? '#ff0000'
  										: item.workingtag_equip == '运行暂停'
  										? '#ff0000'
  										: '',
  								  }" >{{item.workingtag_equip}}</text>
  							  </view>
  							</view>
  						</view>
  					</view>	
  				</uni-grid-item>
  			</uni-grid>
  	 </view>
	 
	 <view v-else>
	   <view class="flex-col space-y-14 space-y-14 nullequip">
	     <view class="flex-col justify-start items-start star">
	       <image class="image_22" src="../../static/images/de7aa1f75c9251004e35494cfad94987.png"/>
	       <image class="image_23 pos_2" src="../../static/images/36bcff6a148ae5abec67bdb790999561.png"/>
	     </view>
	     <text class="self-center font_9 text_22">此房间无设备</text>
	   </view>
	 </view>
	 
   </view>
  
  
  	
  	<view class="typelist" v-show="editMode">
  		<view class="date">
  			<view class="tabWrap">
  				<view v-for="(item, index) in typeList" :key="index" :class="{ active: selectedIndex1 === index }" @click="clickTable(index)">
  					<view class="eachTab" :class="[tabCurrentIndex == index ?'active':'']">
  						<image :src="item.srcUrl" style="width: 50rpx;height: 50rpx;"/>
  					</view>
  					<text class="eachTab" style="color: #696b66;font-size: 28rpx;">{{ item.name }}</text>
  				</view>
  			</view>
  		</view>
  	</view>
  		
  	<view v-show="showDeleteDialog" class="delete-dialog">
  	  <view class="dialog-content">
  	    <text>重命名为</text>
  	    <view class="btn-group">
  		  <input name="equipname" v-model="equipname" placeholder="请输入房间名称"   @input="clearInput"/>
  	      <button @click="changename()">确定</button>
  	      <button @click="showDeleteDialog = false">取消</button>
  	    </view>
  	  </view>
  	</view>	
  </view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	//根据账号查询特定房间设备信息
	import { _getroomequip } from '@/service/equip.js'
	export default {
	components: {  },
    data() {
      return {
		  nickname:'',
		  account_user:'',
		  password_user:'',
		  rooms:[],
		  equips:[],
		  
		  laboroom:'',
		  serialnum_room:'',
		  inputClearValue: '',
		    equipname:'',
		    nickname:'',
		    account_user:'',
		    password_user:'',
		    rooms:[],
		    equips:[],
		    editMode:false,
		    selectedIndex1: -1, //当前选中的元素的索引
		    showShade1: false,//长按后设备右上角圈圈的显示状态  默认不显示
		    tabCurrentIndex: '0',
		    serialnum_sharingequip:'',
		    account_sharingequip:'',
		    serialnum_equip:'',
		    serialnum_room:'',
		    name_equip:'',
		    showDeleteDialog: false,
		    name: '',
		  typeList: [
		  	{
		  		value: '1',
		  		srcUrl:'../../static/images/efff544c40d6ca31e3d98e9f42642b6d.png',
		  		selectSrcUrl:'../../static/images/efff544c40d6ca31e3d98e9f42642b6d.png',
		  		name: '删除',
		  		selected: false // 添加selected属性，默认为false
		  	},
		  	{
		  		value: '2',
		  		srcUrl:'../../static/images/7d9d29a6edb12017e2cdbf6da78f71fc.png',
		  		selectSrcUrl:'../../static/images/7d9d29a6edb12017e2cdbf6da78f71fc.png',
		  		name: '移动设备',
		  		selected: false // 添加selected属性，默认为false
		  	},
		  	{
		  		value: '3',
		  		srcUrl:'../../static/images/21b48f083461141fe0c21b7f8f5e8bd9.png',
		  		selectSrcUrl:'../../static/images/21b48f083461141fe0c21b7f8f5e8bd9.png',
		  		name: '重命名',
		  		selected: false // 添加selected属性，默认为false
		  	},
		  	{
		  		value: '4',
		  		srcUrl:'../../static/images/share (2).png',
		  		selectSrcUrl:'../../static/images/7fb848bc7cf281d60011673c809a0647.png',
		  		name: '共享',
		  		selected: false // 添加selected属性，默认为false
		  	}
		  ],
	  };
    },
	onShow() {
		try {
			const value = uni.getStorageSync('modifyroom');
			if (value) {
				console.log(value && value.from === '/pages/roomsguanli/roomsguanli')
				this.account_user = value.data.account_user
				this.laboroom=value.data.name_room;
				this.serialnum_room=value.data.serialnum_room;
				console.log(this.account_user)
				console.log(value.data.name_room)
				console.log(value.data.serialnum_room)
			}
		} catch (e) {
			console.error(e);
		}
		
		try {
			const value = uni.getStorageSync('modifyroom1');
			if (value && value.from === '/pages/index1/index1') {
				console.log(value)
				this.account_user = value.data.account_user
				this.laboroom=value.data.name_room;
				this.serialnum_room=value.data.serialnum_room;
				console.log(this.account_user)
				console.log(value.data.name_room)
				console.log(value.data.serialnum_room)
			}
		} catch (e) {
			console.error(e);
		}
		this.roomequip();
	},
	// onLoad: function (options) {
	//    this.laboroom= options.roomName2;
	//    // 使用传递的房间名称执行其他操作
	//    console.log(this.name_room)
	// },
    methods: {
		// link(e) {
		// 	let {
		// 		index
		// 	} = e.detail
		// 	console.log(this.equips[index].serialnum_equip)
			
		// 	let newdata = {
		// 		serialnum_equip:this.equips[index].serialnum_equip,
		// 		name_equip:this.equips[index].name_equip
		// 	}
		// },
		
		async roomequip(){
			let data={
				account_user:this.account_user,
				serialnum_room:this.serialnum_room
			}
			let res=await _getroomequip(data)
			
			console.log(res.data)
			this.equips = res.data
			for (let i=0; i<this.equips.length; i++){
				let s = this.equips[i].workingtag_equip
				if (s=='DISCONNECT') this.equips[i].workingtag_equip = '未连接'
				else if (s=='CONNECTED') this.equips[i].workingtag_equip = '已连接'
				else if (s=='RUN') this.equips[i].workingtag_equip = '运行中'
				else if (s=='ON') this.equips[i].workingtag_equip = '在线'
				else if (s=='OFF') this.equips[i].workingtag_equip = '设备离线'
				else if (s=='STOP') this.equips[i].workingtag_equip = '任务结束'
				else if (s=='PULSE') this.equips[i].workingtag_equip = '运行暂停'
			}
			console.log(this.equips)
		},
		navBack(){
			uni.navigateBack({
				delta:2
			})
		},
		toggleEditMode() {
		      this.editMode = !this.editMode; // 切换编辑模式的状态
		    },
		link(e) {
			if(this.editMode){
				let {
					index
				} = e.detail
				console.log(this.equips[index].serialnum_equip)
				
				// let newdata = {
				// 	serialnum_equip:this.equips[index].serialnum_equip,
				// 	name_equip:this.equips[index].name_equip
				// }
				this.serialnum_equip=this.equips[index].serialnum_equip
				this.name_equip=this.equips[index].name_equip
				console.log(this.serialnum_equip)
			}
			
		},
		async getequipsinfo(){ 
			let data={
				account_user:this.account_user
			}
			let res = await _getequiplistall(data)
			this.equips = res.data
			// console.log(this.equips)
			for (let i=0; i<this.equips.length; i++){
				let s = this.equips[i].workingtag_equip
				if (s=='DISCONNECT') this.equips[i].workingtag_equip = '设备离线'
				else if (s=='CONNECTED') this.equips[i].workingtag_equip = '待机'
				else if (s=='RUN') this.equips[i].workingtag_equip = '加热中'
				else if (s=='ON') this.equips[i].workingtag_equip = '开机'
				else if (s=='OFF') this.equips[i].workingtag_equip = '关机'
				else if (s=='STOP') this.equips[i].workingtag_equip = '冷却中'
				else if (s=='PULSE') this.equips[i].workingtag_equip = '保温中'
			}
			console.log(this.equips)
		},
		
		toggleIcon(index) {
		  if (this.editMode) {
		    if (this.selectedIndex1 === index) {
		      this.selectedIndex1 = -1;//再次点击设备后selectedIndex1变为默认状态
		    } 
			else {
		      this.selectedIndex1 = index;//当点击未选中的设备时，将 selectedIndex1 设置为对应设备的索引
		    }
		  }
		  else if(!this.editMode){//再次变为editMode时不会有圈圈必须再次选中才会有圈圈（！editMode时必须点击其它地方后才能实现此效果）
			  this.selectedIndex1=-1;
		  }
		  console.log('After toggle:', this.editMode, this.selectedIndex1); //打印切换后的值
		},
		
		onclick(){
			// this.showShade1=!this.showShade1
		},
		clearInput: function(event) {
		    this.inputClearValue = event.detail.value;
		    if (event.detail.value.length > 0) {
		        this.showClearIcon = true;
		    } else {
		        this.showClearIcon = false;
		    }
		},
		
		
		//删除设备
		async deleteequip() {
		  console.log(this.serialnum_equip)
		  console.log(this.account_user)
		  let data1 = {
		  		// serialnum_sharingequip:this.serialnum_sharingequip,
				// account_sharingequip:this.account_sharingequip
				serialnum_equip:this.serialnum_equip,
				account_user:this.account_user
		  	}
		  // let res = await _deleteroomequip(data1.serialnum_sharingequip,data1.account_sharingequip);
		  let res = await _deleteequip(data1);
		  console.log(this.serialnum_equip)
		  console.log(this.account_user)
		  if (res.flag) {
		    setTimeout(() => {
		      uni.hideLoading();
		    }, 500);
		  } else {
		    setTimeout(() => {
		      uni.hideLoading();
		      this.$api.msg(data1.message);
		    }, 500);
		  }
		},
		//移动设备
		//跳转到moveroom
		gotoroom() {
			console.log(this.serialnum_equip)
		      uni.navigateTo({
		        url: '/pages/moveroom/moveroom?serialnum_equip=' + this.serialnum_equip
		      });
		    },	
		
		async changename(){
			console.log(this.serialnum_equip)
			console.log(this.equipname)
		  let data1 = {
		  		serialnum_equip:this.serialnum_equip,
				name_equip:this.equipname
		  	}
		  // let res = await _changename(data1.serialnum_equip,data1.name_equip);
		  let res = await _changename(data1);
		  if (res.flag) {
		    setTimeout(() => {
		      uni.hideLoading();
		    }, 500);
		  } else {
		    setTimeout(() => {
		      uni.hideLoading();
		      this.$api.msg(data1.message);
		    }, 500);
		  }
		  
		},	
		// 重命名
		rename(){
			this.showDeleteDialog = true;
		},
		//点击事件
		clickTable(index) {
		  this.tabCurrentIndex = index;
		  console.log(this.tabCurrentIndex)
		 if(this.tabCurrentIndex===0){
			 // console.log('删除设备：',this.serialnum_sharingequip,this.account_sharingequip)
			 this.deleteequip()
		 }
		 else if(this.tabCurrentIndex===1){
			 this.gotoroom()
		 }
		 else if(this.tabCurrentIndex===2){
			 this.showDeleteDialog = true
		 }
		 else if(this.tabCurrentIndex===3){
			 this.gotoDetail()
		 }
		},
	}
  };
</script>

<style scoped lang="scss">
	// .grid-item-box {
	// 	flex: 1;
	// 	// position: relative;
	// 	/* #ifndef APP-NVUE */
	// 	display: flex;
	// 	/* #endif */
	// 	flex-direction: column;
	// 	align-items: center;
	// 	justify-content: center;
	// 	padding: 6rpx;
	// }
	
	// .grid{
	// 	margin-top: 25rpx;
	// }

 //  .page {
 //    background-color: #ffffff;
 //    width: 100%;
 //    overflow-y: auto;
 //    overflow-x: hidden;
 //    height: 100%;
 //    }
 //  .group_7 {
	// margin-top: 5.5rpx;
	// padding-left: 23.5rpx;
	// padding-right: 25rpx;
        
	// .section_3 {
	//   padding: 4.17rpx 25rpx 16.67rpx;
	//   background-color: #ffffff;
	//   border-radius: 20.83rpx;
	//   box-shadow: 0px 1.17rpx 3.33rpx #00000040;
	//   width: 333.33rpx;
	//   border: solid 0.08rpx #b4cccb80;
	//   .image_13 {
	// 	width: 75rpx;
	// 	height: 89.58rpx;
	//   }
	// }
	// .space-y-14 {
	//   & > view:not(:first-child),
	//   & > text:not(:first-child),
	//   & > image:not(:first-child) {
	// 	margin-top: 35.17rpx;
	//   }
	// }
	// .space-x-4 {
	//   & > view:not(:first-child),
	//   & > text:not(:first-child),
	//   & > image:not(:first-child) {
	// 	margin-left: 8.33rpx;
	//   }
	//   .text_12 {
	// 	color: #43cf7c;
	// 	line-height: 17.71rpx;
	//   }
	// }
	// .section_2 {
	//   background-color: #a6a6a6;
	//   width: 2.08rpx;
	//   height: 29.17rpx;
	// }
 //  }
 //  .space-y-15 {
	// & > view:not(:first-child),
	// & > text:not(:first-child),
	// & > image:not(:first-child) {
	//   margin-top: 31.25rpx;
	// }
 //  }
 //  .font_4 {
	// font-size: 18.75rpx;
	// font-family: AlibabaPuHuiTi;
	// line-height: 16.67rpx;
	// color: #00000080;
 //  }
 //  .font_1 {
	// margin-top: 15rpx;
	// font-size: 25rpx;
	// font-family: SourceHanSansCN;
	// line-height: 22.92rpx;
	// color: #000000;
 //  }
 //  .image_14 {
	// margin-right: 54rpx;
	// margin-top: 125rpx;
	// border-radius: 50%;
	// width: 94rpx;
	// height: 94rpx;
	// position: fixed;
	// bottom: 140rpx;
	// right: 0;
 //  }
 .checkPage{
 			// width: 100%;
 			// overflow: hidden;
 			bottom: 0;
 			position: absolute;
 		}
 		
 		.typelist {
 		  position: fixed;
 		  bottom: 0;
 		}
 		.date{
 			background: #ffffff;
 			padding: 10upx;
 			margin-bottom: 50rpx;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			flex-wrap: wrap;
 			width: 100%;
 			// height: 240upx;
 		}
 		.tabWrap {
 			display: flex;
 			height: 80upx;
 			width: 100%;
 		}
 	.eachTab{
 			display: flex;
 			align-items: center;
 			justify-content: space-evenly;
 			width: 145upx;
 			height: 50upx;
 			border-radius: 40upx;
 			background: #ffffff;
 			margin: 10upx 20upx;
 		}
 
 	.grid-item-box {
 		flex: 1;
 		// position: relative;
 		/* #ifndef APP-NVUE */
 		display: flex;
 		/* #endif */
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		padding: 6rpx;
 	}
 	
 	.grid{
 		margin-top: 25rpx;
 	}
 
 .page {
   background-color: #ffffff;
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
   }
 .group_7 {
 	margin-top: 5.5rpx;
 	padding-left: 23.5rpx;
 	padding-right: 25rpx;
       
 	.section_3 {
 	  padding: 4.17rpx 25rpx 16.67rpx;
 	  background-color: #ffffff;
 	  border-radius: 20.83rpx;
 	  box-shadow: 0px 1.17rpx 3.33rpx #00000040;
 	  width: 333.33rpx;
 	  border: solid 0.08rpx #b4cccb80;
 	  .image_13 {
 		width: 75rpx;
 		height: 89.58rpx;
 	  }
 	}
 	.section_3 {
 	  padding: 4.17rpx 25rpx 16.67rpx;
 	  background-color: #ffffff;
 	  border-radius: 20.83rpx;
 	  box-shadow: 0px 4.17rpx 8.33rpx #00000040;
 	  width: 333.33rpx;
 	  border: solid 2.08rpx #00baad80;
 	  .image_13 {
 	    width: 75rpx;
 	    height: 89.58rpx;
 	  }
 	}
 	
 	.space-y-14 {
 	  & > view:not(:first-child),
 	  & > text:not(:first-child),
 	  & > image:not(:first-child) {
 		margin-top: 35.17rpx;
 	  }
 	}
 	.space-x-4 {
 	  & > view:not(:first-child),
 	  & > text:not(:first-child),
 	  & > image:not(:first-child) {
 		margin-left: 8.33rpx;
 	  }
 	  .text_12 {
 		color: #43cf7c;
 		line-height: 17.71rpx;
 	  }
 	}
 	.section_2 {
 	  background-color: #a6a6a6;
 	  width: 2.08rpx;
 	  height: 29.17rpx;
 	}
 }
 .space-y-15 {
 	& > view:not(:first-child),
 	& > text:not(:first-child),
 	& > image:not(:first-child) {
 	  margin-top: 31.25rpx;
 	}
 }
 .font_4 {
 	font-size: 18.75rpx;
 	font-family: AlibabaPuHuiTi;
 	line-height: 16.67rpx;
 	color: #00000080;
 }
 .font_1 {
 	margin-top: 15rpx;
 	font-size: 25rpx;
 	font-family: SourceHanSansCN;
 	line-height: 22.92rpx;
 	color: #000000;
 }
 .image_14 {
 	margin-right: 54rpx;
 	margin-top: 125rpx;
 	border-radius: 50%;
 	width: 94rpx;
 	height: 94rpx;
 	position: fixed;
 	bottom: 140rpx;
 	right: 0;
 }
 .selected-icon {
   position: absolute;
   top: 20rpx;
   right: 30rpx;
   width: 20px;
   height: 20px;
 }
 .image_22 {
   margin-left: 255.42rpx;
   margin-top: 400rpx;
   width: 168.75rpx;
   height: 164.58rpx;
 }
 
 .image_23 {
   // width: 204.17rpx;
   // height: 197.92rpx;
   margin-left: 304rpx;
   margin-top: -225rpx;
 }
 .pos_2 {
   width: 204.17rpx;
   height: 197.92rpx;
 }
 .font_9 {
   font-size: 31.25rpx;
   font-family: SourceHanSansCN;
   // line-height: 30rpx;
   color: #a6a6a6;
   margin-top: 50rpx;
 }
 
 .text_22 {
   color: #808080;
   line-height: 29.17rpx;
   letter-spacing: 5rpx;
 }
 .image1{
 	width: 38rpx;
 	height: 38rpx;
 	// margin-top: -40rpx;
 	margin-left: 275rpx;
 }
 .selected-image {
   position: absolute;
   top: 20rpx;
   left: 35rpx;
 }
</style>